<template>
  <div class="dashboard-container">
    <div class="app-container">
      <h2>
        部门
      </h2>
      <el-card class="tree-card">
        <!-- 用了一个行列布局 -->
        <!-- 监听，点击就显示弹出框 -->
        <TreeTools :node-data="company" :is-root="true" @addDepartment="addDepartment" />
        <hr>
        <!-- 部门数据 -->
        <el-tree :data="depts" :default-expand-all="true" :props="{label:'name'}">
          <template #default="scope">
            <!-- 1 父传子，这边用，左边的名字和子组件的一样 渲染 -->
            <!-- 2 子传父 更新数据，那边传过来，这边接收就可，调用下面封装的这个获取数据的函数-->
            <!-- 添加部门功能 4 接收子组件传过来的点击事件，那边点击，这边就显示弹出框 -->
            <TreeTools :node-data="scope.data" @editDepartment="editDepartment" @delDepartment="getDepartmentList" @addDepartment="addDepartment" />
          </template>
        </el-tree>
      </el-card>
      <!-- // 不让页面数据重复  3 子传父，父亲接收    弹窗那边接收，弹窗才能进行判断-->
      <AddDept ref="addDept" :show-dialog.sync="showDialog" :node-data="nodeData" @addDept="getDepartmentList" /></div>
  </div>
</template>

<script>
// 添加部门功能 3 父组件引入子组件，并且设置默认为不显示，点击了 才触发功能
import TreeTools from '@/views/departments/components/tree-tools'
import { getDepartmentList } from '@/api/department'
import { listToTreeData } from '@/utils'
import AddDept from './components/add-dept'
export default {
  components: {
    TreeTools,
    AddDept
  },
  data() {
    return {
      // id要加，我们平时筛选这个作为条件，看数据要点进去很里面
      company: {
        name: '董氏集团养殖有限公司', manager: '董董董', id: ''
      },
      depts: [],
      showDialog: false,
      nodeData: {}
    }
  },
  created() {
    this.getDepartmentList()
  },
  methods: {
    async  getDepartmentList() {
      const { depts } = await getDepartmentList()
      // console.dir(depts)
      this.depts = listToTreeData(depts, '')
      // 把depts丢进去那边转一转，筛选一下，pid是空的
    },
    addDepartment(nodeData) {
      // 不让页面数据重复  2 将树形点击时传入的数据记录下来传给弹窗
      this.showDialog = true
      // 自己存数据，交给弹窗
      this.nodeData = nodeData
      // console.log(62, this.nodeData)点击了哪个就打印哪个部门出来
    },
    // 弹窗打开数据没那么快回来--异步-等待
    async   editDepartment(nodeData) {
      // 弹出弹窗，同时回显数据也应该在这时执行
      // 可以利用 $refs 拿到子组件，然后直接调用其中的函数
      await this.$refs.addDept.getDepartmentDetail(nodeData.id)
      // 点击编辑也要存起来当前点击的数据
      this.nodeData = nodeData
      this.showDialog = true
    }
  }
}
</script>

<style scoped>
.tree-card {
  padding: 30px  140px;
  font-size:14px;
}
.optbtn{
  cursor: pointer;
}
</style>
